<template>
    <div class="Box">
        <e-charts class="e-charts" :options="options" />
    </div>
</template>

<script>
import ECharts from "./index";
// import adaptionInstance from "@/adaptionInstance";

export default {
    name: "LineLevel",
    components: {
        ECharts,
    },
    props: {
        recive: {
            type: Array,
        },
    },
    data() {
        return {
            // recive: [
            //     ["列车故障", "屏障门故障", "列车故障", "屏障门故障", "列车故障"],
            //     [91, 80, 73, 60, 50],
            //     [100, 100, 100, 100, 100],
            //     ["#FFC151", "#05C9FC", "#05C9FC", "#18FDFF", "#18FDFF"],
            // ],
        };
    },
    computed: {
        options() {
            var nameList = this.recive.map((ele) => {
                return ele.name;
            });
            var valueList = this.recive.map((ele) => {
                return ele.value;
            });
            var backList = this.recive.map(() => {
                return 100;
            });
            var colorList = this.recive.map((ele) => {
                return ele.color;
            });
            // console.log(colorList);

            // const _this = this;
            return {
                grid: {
                    left: "0%",
                    right: "0%",
                    bottom: "0%",
                    top: "0%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "none",
                    },
                    formatter: function(params) {
                        return (
                            params[0].name +
                            "<br/>" +
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                            params[0].seriesName +
                            " : " +
                            Number(
                                (params[0].value.toFixed(4) / 10000).toFixed(2),
                            ).toLocaleString() +
                            " <br/>"
                        );
                    },
                },
                xAxis: {
                    show: false,
                    type: "value",
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            // textStyle: {
                            color: "#fff",
                            // },
                            // offset: 20,
                            // margin: 20,

                            formatter: function(value) {
                                return value;
                            },
                        },
                        // positon: "right",
                        // offset: -20,
                        // position: {
                        //     top: 20,

                        // },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        data: nameList,
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            // textStyle: {
                            color: "#ffffff",
                            fontSize: 12,
                            // },
                            formatter: function(value) {
                                if (value) {
                                    return value.toLocaleString();
                                } else {
                                    return value.toLocaleString();
                                }
                            },
                        },
                        data: valueList,
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            // textStyle: {
                            color: "#ffffff",
                            fontSize: 12,
                            // },
                            formatter: function(value) {
                                if (value) {
                                    return "         " + value.toLocaleString();
                                } else {
                                    return value.toLocaleString();
                                }
                            },
                        },
                        data: this.recive[4],
                    },
                ],
                series: [
                    {
                        name: "数值",
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            // normal: {
                            borderRadius: 20,
                            color: function(params) {
                                let colorList1 = colorList;
                                return colorList1[params.dataIndex];
                                // },
                            },
                        },
                        barWidth: 8,
                        data: valueList,
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 8,
                        barGap: "-100%",
                        borderRadius: 20,
                        data: backList,
                        itemStyle: {
                            // normal: {
                            color: "#112F41",
                            borderRadius: 30,
                            // },
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.Box {
    width: 100%;
    height: 100%;
    .e-charts {
        width: 100%;
        height: 100%;
    }
    .info {
        margin-top: 10px;
        height: 25px;
        text-align: center;
        font-size: 12px;
        font-weight: bolder;
        color: #ffffff;
        opacity: 0.6;
    }
}
</style>
